'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { storage } from '@/lib/storage';
import { Feedback } from '@/types';

export default function FeedbackSection() {
  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
  const [newFeedback, setNewFeedback] = useState('');

  useEffect(() => {
    setFeedbacks(storage.getFeedbacks());
  }, []);

  const handleSubmitFeedback = (e: React.FormEvent) => {
    e.preventDefault();
    if (newFeedback.trim()) {
      storage.addFeedback(newFeedback.trim());
      setFeedbacks(storage.getFeedbacks());
      setNewFeedback('');
    }
  };

  return (
    <div className="w-full max-w-4xl mx-auto mt-12 space-y-8">
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        className="anime-card p-6"
      >
        <h3 className="text-2xl font-bold text-white mb-6 text-center">
          💡 帮我们改进网站
        </h3>

        <form onSubmit={handleSubmitFeedback} className="space-y-4">
          <div className="relative">
            <input
              type="text"
              value={newFeedback}
              onChange={(e) => setNewFeedback(e.target.value)}
              placeholder="分享你的建议或想法..."
              className="w-full px-6 py-3 bg-white bg-opacity-10 backdrop-blur-md border-2 border-purple-300 border-opacity-30 rounded-full text-white placeholder-gray-300 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-300"
            />
            <button
              type="submit"
              className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-2 rounded-full hover:from-purple-700 hover:to-pink-700 transition-all duration-300"
            >
              提交
            </button>
          </div>
        </form>
      </motion.div>

      {feedbacks.length > 0 && (
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="anime-card p-6 overflow-hidden"
        >
          <h4 className="text-xl font-bold text-white mb-4">
            🌟 用户反馈
          </h4>

          <div className="space-y-3 max-h-60 overflow-y-auto">
            {feedbacks.map((feedback, index) => (
              <motion.div
                key={feedback.id}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: index * 0.1 }}
                className="bg-white bg-opacity-10 rounded-lg p-3 backdrop-blur-sm"
              >
                <p className="text-white text-sm">{feedback.content}</p>
                <p className="text-gray-400 text-xs mt-2">
                  {new Date(feedback.timestamp).toLocaleDateString('zh-CN')}
                </p>
              </motion.div>
            ))}
          </div>
        </motion.div>
      )}

      {feedbacks.length === 0 && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="text-center text-gray-300"
        >
          <p className="text-lg">还没有用户反馈</p>
          <p className="text-sm mt-2">成为第一个分享建议的人吧！ 🎉</p>
        </motion.div>
      )}
    </div>
  );
}